<script lang="ts">
export default {
  options: {
    virtualHost: true, // 虚拟节点
    styleIsolation: 'shared', // 解除样式隔离
  },
}
</script>

<!-- eslint-disable import/first -->
<script lang="ts" setup>
import dayjs from 'dayjs'
import type { ShopClassResp } from '@/apis/shop'
import { ofDate } from '@/utils/common'

const props = defineProps<{
  info: ShopClassResp
  showEnrollTime?: boolean
  showRenewalTime?: boolean
}>()

const isPastTime = (inputTime) => {
  if (!inputTime) {
    return true
  }
  // 将传入的时间字符串转换为 Date 对象
  const inputDate = ofDate(inputTime)
  // 获取当前时间
  const currentDate = new Date()
  // 比较两个 Date 对象
  return inputDate > currentDate
}

const isBetweenRenewalTime = (renewalStartTimeStr, renewalEndTimeStr) => {
  if (!renewalStartTimeStr || !renewalEndTimeStr) {
    return false
  }
  const renewalStartTime = ofDate(renewalStartTimeStr)
  const renewalEndTime = ofDate(renewalEndTimeStr)
  const currentDate = new Date()
  // 比较两个 Date 对象
  return currentDate > renewalStartTime && currentDate < renewalEndTime
}
</script>

<template>
  <view class="class-card">
    <view class="flex-row-start-start1">
      <!-- <wd-tag type="primary">
        <text>{{ useDictLabel('ClassCategoryEnum', props.info.classCategory) }}</text>
      </wd-tag> -->
      <text class="border-rd-4rpx bg-[#ee8432] p-6rpx text-13px color-white">
        {{ useDictLabel('ClassCategoryEnum', info.classCategory) }}
      </text>
      <text class="ml-1 flex-1 overflow-hidden fw-500 text-main">
        {{ info.name }}
      </text>
    </view>
    <view class="mt-4px text-13px color-gray-5 line-1">
      <text class="ml-1">
        {{ props.info.arrangeTemplate?.startDate }}~{{ props.info.arrangeTemplate?.endDate }}
      </text>
      <text class="ml-1">
        {{ props.info.timeTemplate?.startTime?.slice(0, 5) }}-{{ props.info.timeTemplate?.endTime?.slice(0, 5) }}
      </text>
    </view>

    <view class="my-12px h-156rpx flex-row-start-center">
      <image class="class-image" src="/static/images/bingxue.jpeg" mode="aspectFill" />
      <view class="detail ml-16rpx h-full flex-col-around-start text-size-sm color-gray-5">
        <view>
          <wd-icon name="user" size="16px" />
          <text class="ml-1 text-14px">
            {{ props.info.leadTeacherName }}老师
          </text>
        </view>
        <view>
          <wd-icon name="time" size="16px" />
          <text class="ml-1 text-14px">
            {{ props.info.arrangeTemplate?.name }}·共{{ props.info.totalLessonCount }}次课
          </text>
        </view>
        <view>
          <wd-icon name="location" size="16px" />
          <text class="ml-1 text-14px">
            {{ props.info.campusName || '-' }}
          </text>
        </view>
      </view>
    </view>
    <slot name="bottom">
      <view class="flex-row-between-center">
        <view v-if="showRenewalTime && isBetweenRenewalTime(props.info.renewalStartTime, props.info.renewalEndTime)" class="ml-1 text-12px color-[#f00]">
          当前处于续报期，您享有提前报名资格
        </view>
        <view v-else-if="showEnrollTime && props.info?.enrollStartTime && isPastTime(props.info.enrollStartTime)" class="ml-1 text-12px color-[#f00]">
          {{ dayjs(props.info.enrollStartTime).format('YYYY年MM月DD日HH:mm') }}开放报名
        </view>
        <view v-else>
          <wd-tag v-if="props.info.remainCount > 2" type="warning" plain custom-class="remain-tag">
            热报
          </wd-tag>
          <wd-tag v-else-if="props.info.remainCount > 0" type="danger" plain custom-class="remain-tag">
            余{{ props.info.remainCount }}
          </wd-tag>
          <wd-tag v-else type="default" plain custom-class="remain-tag">
            已满
          </wd-tag>
        </view>

        <view class="flex-row-center-center">
          <text class="text-14px text-#666 fw-500">
            总价:
          </text>
          <text class="text-18px text-#DD0A0A fw-500">
            ￥{{ props.info.totalPrice }}
          </text>
        </view>
      </view>
    </slot>
  </view>
</template>

<style lang="scss" scoped>
  .class-card {
    padding: 24rpx;
    background-color: #FFFFFF;
    border-radius: 8px;
    box-sizing: border-box;
    overflow: hidden;
  }

  :deep(.remain-tag) {
    height: 24px;
    line-height: 17px;
    font-weight: 600;
  }

  .class-image {
    // 2:1
    width: 288rpx;
    height: 156rpx;
    border-radius: 8rpx;
  }
</style>
